<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <!-- IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 兼容国产浏览器的高速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" type="text/css" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../lib/bootstrapvalidator/dist/css/bootstrapValidator.css"/>
    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }

        body {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            border: 1px solid #eee;
        }

        .box {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden
        }

        .box img {
            width: 100%;
        }

        .box .login {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }
    </style>
</head>

<body>
<div class="box">
    <img class="background">
    <img class="login" src="login.png" alt="">
</div>

<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // render img
        var preview = JSON.parse(sessionStorage.getItem("schoolPreview"));
        if (preview) {
            $(".schoolName").html(preview.name);
            $(".background").attr("src", preview.background);
        }

        // ================== resize =================
        // resize body
        var body = $("body");
        var width = body.width();
        // var height = width / 1920 * 1000; // 正确
        var height = width / 1920 * 948;
        body.height(height);

        // resize login
        // $(".login").width(width/4.7/1920*1000); // 正确
        $(".login").width(width / 2.3 / 1920 * 1000); // 临时



    });
</script>
</body>
</html>